<template>
    <view class="test-container">
        <text class="title">Uni-UI 组件测试页面</text>

        <!-- 测试 uni-icons 组件 -->
        <view class="test-section">
            <text class="section-title">1. uni-icons 组件</text>
            <uni-icons type="success" size="30" color="#07c160"></uni-icons>
            <uni-icons type="info" size="30" color="#1989fa"></uni-icons>
            <uni-icons type="warn" size="30" color="#ff976a"></uni-icons>
            <uni-icons type="error" size="30" color="#f53f3f"></uni-icons>
        </view>

        <!-- 测试 uni-button 组件 -->
        <view class="test-section">
            <text class="section-title">2. uni-button 组件</text>
            <uni-button type="primary">主要按钮</uni-button>
            <uni-button type="default">默认按钮</uni-button>
            <uni-button type="warn">警告按钮</uni-button>
        </view>

        <!-- 测试 uni-badge 组件 -->
        <view class="test-section">
            <text class="section-title">3. uni-badge 组件</text>
            <uni-badge text="12" type="primary" :inverted="false"></uni-badge>
            <uni-badge text="hot" type="success" :inverted="false"></uni-badge>
            <uni-badge text="new" type="error" :inverted="true"></uni-badge>
        </view>

        <!-- 测试 uni-list 组件 -->
        <view class="test-section">
            <text class="section-title">4. uni-list 组件</text>
            <uni-list>
                <uni-list-item title="列表项1" show-arrow></uni-list-item>
                <uni-list-item title="列表项2" show-arrow></uni-list-item>
                <uni-list-item title="列表项3" show-arrow></uni-list-item>
            </uni-list>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    onLoad() {
        console.log('测试页面加载成功');
    }
}
</script>

<style>
.test-container {
    padding: 20px;
}

.title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
}

.test-section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f8f8f8;
    border-radius: 8px;
}

.section-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    display: block;
}

uni-icons {
    margin-right: 15px;
}

uni-button {
    margin-bottom: 10px;
}

uni-badge {
    margin-right: 15px;
}
</style>